<template>
	<view class="page page-fill">
		<view class="header">
			<block>
				<image class="face" src="../../static/icos/default-face.png"></image>
			</block>

			<view class="info-wrapper" v-if="userIsLogin">
				<view class="nickname">{{user.nickname}}</view>
				<view class="nav-info">ID: {{user.id}}</view>
			</view>
			<view v-else>
				<navigator url="../login/login">
					<view class="nickname login-regist">登录 / 注册</view>
				</navigator>
			</view>

			<view class="set-wrapper" v-if="userIsLogin">
				<navigator url="../profile/profile">
					<image class="settings" src="../../static/icos/settings.png" mode="aspectFill"></image>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userIsLogin: true,
				user: {"id": 888, "nickname": "dandan"}
			}
		},
		onShow() {
			var me = this;
			// 用户状态切换
			/* var user = uni.getStorageSync('loginUser');
			if (user != null && user != '' && user != undefined) {
				me.userIsLogin = true;
				me.user = user;
			} else {
				me.userIsLogin = false;
				me.user = {};
			} */
			uni.setStorageSync('loginUser', {"id": 888, "nickname": "dandan"});
			var user = me.getLoginUser();
			if (user != null) {
				me.userIsLogin = true;
				me.user = user;
			} else {
				me.userIsLogin = false;
				me.user = {};
			} 
		},
		methods: {
		}
	}
</script>

<style>
	.page-fill {
		width: 100%;
		height: 100%;
	}

	.header {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		/* #ifdef MP */
		padding: 0 30upx 40upx 30upx;
		/* #endif */
		/* #ifndef MP */
		padding: 120upx 30upx 40upx 30upx;
		/* #endif */
		background-color: #cce6ff;
		/* background-image: url('../../static/icos/bg.png'); */
		background-size: 50%;
	}

	.face {
		width: 120upx;
		height: 120upx;
		border-radius: 50%;
		/* 防止头像被挤压 */
		flex-shrink: 0;
	}

	.info-wrapper {
		display: flex;
		flex-direction: column;
		width: 80%;
		margin-left: 40upx;
	}

	.nickname {
		font-size: 18px;
		font-weight: bold;
		color: #0081ff;
	}

	.login-regist {
		margin-top: 30upx;
		margin-left: 60upx;
	}

	.nav-info {
		margin-top: 10upx;
		font-size: 14px;
		color: #0081ff;
	}

	.set-wrapper {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		width: 15%;
	}

	.settings {
		width: 40upx;
		height: 40upx;
		color: #0081ff;
	}
</style>
